<script setup>
import { ref, onMounted } from 'vue'
import { getEmployeeListApi, addEmployeeApi, updateEmployeeApi, deleteEmployeeApi, getEmployeeByIdApi } from '@/api/employee'
import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'


const loading = ref(true)

const tableData = ref([])
// 初始化数据
onMounted(() => {
    getList()
})
//获取数据
const getList = async () => {
    const tep = await getEmployeeListApi()
    tableData.value = tep.data
    console.log(tableData.value)
    loading.value = false
}
// 删除
const handleDelete = async (index, row) => {
    console.log("当前对象：", row)
    ElMessageBox.confirm('确认删除吗?')
        .then(async () => {
            await deleteEmployeeApi(row.id)
            tableData.value.splice(index, 1)
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

//弹窗
const centerDialogVisible = ref(false)
const add_upate = ref(false)
const object = ref({ name: '', username: '', tel: '', birthday: '', bodyNumber: '', entryTime: '', clazzNumber: 0, state: '' })

// 修改
const update = async (row) => {
    add_upate.value = false
    getEmployeeByIdApi(row.id).then(res => {
        object.value = res.data
        centerDialogVisible.value = true
        console.log(object.value)
    })
}

const sumbitUpdate = async() => {
    await updateEmployeeApi(object.value)
    .then(res =>{
        ElMessage.success('修改成功')
    })
    .catch(err => {
        console.log(err)
    })
    centerDialogVisible.value = false
    window.location.reload();
}
//添加
const add = () => {
    object.value = { name: '', username: '', tel: '', birthday: '', bodyNumber: '', entryTime: '', clazzNumber: 0, state: '' }
    add_upate.value = true
    centerDialogVisible.value = true
}
const sumbitAdd = async() => {
    await addEmployeeApi(object.value)
    .then(res =>{
        tableData.value.push(object.value)
        ElMessage.success('添加成功')
    })
    .catch(err => {
        console.log(err)
    })
    centerDialogVisible.value = false
}

</script>

<template>
    <div class="header">
        <div class="line"></div>
        <div class="title">教练管理</div>
    </div>
    <div style="margin-bottom: 15px;"><el-button type="primary" :icon="Plus" @click="add()">添加教练</el-button></div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%" highlight-current-row>
        <el-table-column fixed type="index" width="50" />
        <el-table-column fixed prop="name" label="姓名" width="90" />
        <el-table-column fixed prop="username" label="教练名" width="90" />
        <el-table-column prop="tel" label="电话" width="130" />
        <el-table-column prop="birthday" label="生日" width="120" />
        <el-table-column prop="bodyNumber" label="身份证号" width="200" />
        <el-table-column prop="entryTime" label="入职时间" width="200" />
        <el-table-column prop="clazzNumber" label="上课次数" width="100" />
        <el-table-column prop="state" label="状态" width="100" />
        <el-table-column label="操作" fixed="right">
            <template #default="scope">
                <el-button size="small" @click="update(scope.row)">
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加弹窗 -->
    <el-dialog v-model="centerDialogVisible" title="教练信息表" width="800" center>
        <!--第一行-->
        <div class="flex gap-4 items-between">
            <div>
                <span>姓名：</span>
                <el-input v-model="object.name" style="width: 240px" placeholder="输入姓名" />
            </div>
            <div>
                <span>教练称号：</span>
                <el-input v-model="object.username" style="width: 240px" placeholder="输入教练称号" />
            </div>
        </div>
        <!--第二行-->
        <div class="flex gap-4 items-between top4">
            <div>
                <span>入职时间：</span>
                <el-date-picker v-model="object.entryTime" type="date" placeholder="入职时间" :size="size"
                    value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
            </div>
            <div>
                <span>生日：</span>
                <el-date-picker v-model="object.birthday" type="date" placeholder="生日" :size="size"
                    value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
            </div>
        </div>
        <!--第三行-->
        <div class="flex gap-4 items-between top4">
            <div>
                <span>电话号码：</span>
                <el-input v-model="object.tel" style="width: 240px" placeholder="输入电话号码" />
            </div>
            <div>
                <span>状态：</span>
                <el-select v-model="object.state" placeholder="Select" size="large" style="width: 240px">
                    <el-option label="激活"  value="1" />
                    <el-option label="失效" value="0" />
                </el-select>
            </div>
        </div>
        <!--第四行-->
        <div class="flex gap-4 items-between top4">
            <div>
                <span>身份证号码：</span>
                <el-input v-model="object.bodyNumber" style="width: 240px" placeholder="输入身份证号码" />
            </div>
            <div>
                <span>上课次数：</span>
                <el-input v-model="object.clazzNumber" style="width: 240px" placeholder="上课次数" disabled/>
            </div>
        </div>
        <!--弹窗提交按钮-->
        <template #footer>
            <div class="dialog-footer top4">
                <el-button v-if="add_upate" type="primary" @click="sumbitAdd()">添加教练</el-button>
                <el-button v-else type="primary" @click="sumbitUpdate()">修改教练</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<style scoped>
.header {
    display: flex;
    align-items: center;
    height: 30px;
    width: 120px;
    margin-bottom: 20px;
}

.line {
    margin-right: 5px;
    width: 4px;
    height: 100%;
    background-color: aqua;
}

.title {
    font-size: 25px;
    font-family: "楷体";
    font-weight: bold;
}

.items-between {
    display: flex;
    justify-content: space-around;
}

.top4 {
    margin-top: 20px;
}
</style>